<template>
<div>
    
    <van-nav-bar placeholder=true title="分类-手机" left-text="返回" left-arrow @click-left="onClickLeft" />
<van-row type="flex">
<van-col span="6">

<van-sidebar class="sidebar" v-model="activeKey">
    <van-sidebar-item title="笔记本" to="/laptop" />
    <van-sidebar-item title="摄影摄像" to="/Photography" />
    <van-sidebar-item title="手机" to="/phone"/>
    <van-sidebar-item title="游戏机" to="/xbox"/>
</van-sidebar>

</van-col>

<van-col span="6">

<van-grid :border="false">
<van-grid-item @click="huawei">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/f32def43fa524256a7748b61cef56207.jpg" width="80px" height="80px"/>
    <span>华为手机</span>
</van-grid-item>
<van-grid-item @click="samsung">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/23a640d129b94053ba8f5aa898adce41.jpg" width="80px" height="80px"/>
    <span>三星手机</span>
</van-grid-item>
<van-grid-item @click="realme">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/3657e05a092241b7b1ff578813c3e3c0.jpg" width="80px" height="80px"/>
    <span>realme</span>
</van-grid-item>
<van-grid-item @click="honor">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/a2e3386fe24e476b97490fd3fb3f6595.jpg" width="80px" height="80px"/>
    <span>荣耀手机</span>
</van-grid-item>
</van-grid>

</van-col>

<van-col span="6">

<van-grid :border="false">
<van-grid-item @click="xiaomi" >
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/ebf9c7923298425da7e59b770d9b5d6d.jpg" width="80px" height="80px"/>
    <span>小米手机</span>
</van-grid-item>
<van-grid-item @click="iQOO">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/eae365fe948a4cd9b8f4909476dc8c56.jpg" width="80px" height="80px"/>
    <span>iQOO</span>
</van-grid-item>
<van-grid-item  @click="vivo">
    <van-image src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/23b7ea29a9b04b92a6086c3c0932dc1e.jpg" width="80px" height="80px"/>
    <span>vivo</span>
</van-grid-item>
</van-grid>

</van-col>

<van-col span="6">

<van-grid :border="false">
<van-grid-item>
    <van-image @click="iphone" src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/c55351f773274a28b038e4a1ea8e1eba.jpg"  width="80px" height="80px" />
    <span>苹果手机</span>
</van-grid-item>
<van-grid-item>
    <van-image @click="yijia" src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/0d0ce27216b640bd811d27ac2a56917f.jpg" width="80px" height="80px" />
    <span>一加</span>
</van-grid-item>
<van-grid-item>
    <van-image @click="OPPO"  src="http://luxuejia-1300969111.cos.ap-guangzhou.myqcloud.com/files/adalab/d6d1d703c913411c8e4418e0584b06b0.jpg" width="80px" height="80px" />
    <span>OPPO手机</span>
</van-grid-item>
</van-grid>

</van-col>

</van-row>
</div>
</template> 

<script>
export default {
    data() {
    return {
        activeKey: 2,
        }
    },
    mounted() {
    },
    created() {
    },
    destroyed() {
    },
    methods: {
    huawei(){
    this.$store.commit("changesousuoinput", "华为手机")
    this.$router.push({path: '/sousuo',})},
    samsung(){
    this.$store.commit("changesousuoinput", "三星手机")
    this.$router.push({path: '/sousuo',})},
    realme(){
    this.$store.commit("changesousuoinput", "realme")
    this.$router.push({path: '/sousuo',})},
    honor(){
    this.$store.commit("changesousuoinput", "荣耀手机")
    this.$router.push({path: '/sousuo',})},
    iQOO(){
    this.$store.commit("changesousuoinput", "iQOO")
    this.$router.push({path: '/sousuo',})},
    OPPO(){
    this.$store.commit("changesousuoinput", "OPPO手机")
    this.$router.push({path: '/sousuo',})},
    xiaomi(){
    this.$store.commit("changesousuoinput", "小米手机")
    this.$router.push({path: '/sousuo',})},
    iphone(){
    this.$store.commit("changesousuoinput", "苹果手机")
    this.$router.push({path: '/sousuo',})},
    vivo(){
    this.$store.commit("changesousuoinput", "vivo手机")
    this.$router.push({path: '/sousuo',})},
    yijia(){
    this.$store.commit("changesousuoinput", "一加")
    this.$router.push({path: '/sousuo',})},
    onClickLeft() {   
        this.$store.commit("changesousuoinput", "")
        this.$router.push({
        path: '/sousuo', })
    },
    },
}
</script>
<style scoped>
.sidebar{
    position:fixed;
    top:10vh;
    left: 0px;
}
span{
    font-size: larger;
}
</style>
